import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva } from 'class-variance-authority';

import { cn } from '@/lib/utils'; // 确保你的项目中存在这个工具函数

// --- 基础排版样式定义 ---

const typographyVariants = cva('', {
    variants: {
        variant: {
            h1: 'scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl',
            h2: 'scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0',
            h3: 'scroll-m-20 text-2xl font-semibold tracking-tight',
            h4: 'scroll-m-20 text-xl font-semibold tracking-tight',
            p: 'leading-7 [&:not(:first-child)]:mt-6',
            blockquote: 'mt-6 border-l-2 pl-6 italic',
            ul: 'my-6 ml-6 list-disc [&>li]:mt-2',
            ol: 'my-6 ml-6 list-decimal [&>li]:mt-2',
            lead: 'text-xl text-muted-foreground',
            large: 'text-lg font-semibold',
            small: 'text-sm font-medium leading-none',
            muted: 'text-sm text-muted-foreground',
        },
    },
});

// --- 组件封装 ---

// 创建所有排版组件
export const H1 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => (
        <h1 ref={ref} className={cn(typographyVariants({ variant: 'h1' }), className)} {...props} />
    )
);
H1.displayName = 'H1';

export const H2 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => (
        <h2 ref={ref} className={cn(typographyVariants({ variant: 'h2' }), className)} {...props} />
    )
);
H2.displayName = 'H2';

export const H3 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => (
        <h3 ref={ref} className={cn(typographyVariants({ variant: 'h3' }), className)} {...props} />
    )
);
H3.displayName = 'H3';

export const H4 = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
    ({ className, ...props }, ref) => (
        <h4 ref={ref} className={cn(typographyVariants({ variant: 'h4' }), className)} {...props} />
    )
);
H4.displayName = 'H4';

export const P = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => (
        <p ref={ref} className={cn(typographyVariants({ variant: 'p' }), className)} {...props} />
    )
);
P.displayName = 'P';

export const Blockquote = React.forwardRef<HTMLQuoteElement, React.HTMLAttributes<HTMLQuoteElement>>(
    ({ className, ...props }, ref) => (
        <blockquote ref={ref} className={cn(typographyVariants({ variant: 'blockquote' }), className)} {...props} />
    )
);
Blockquote.displayName = 'Blockquote';

export const Ul = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>(
    ({ className, ...props }, ref) => (
        <ul ref={ref} className={cn(typographyVariants({ variant: 'ul' }), className)} {...props} />
    )
);
Ul.displayName = 'Ul';

export const Ol = React.forwardRef<HTMLOListElement, React.HTMLAttributes<HTMLOListElement>>(
    ({ className, ...props }, ref) => (
        <ol ref={ref} className={cn(typographyVariants({ variant: 'ol' }), className)} {...props} />
    )
);
Ol.displayName = 'Ol';

// 创建一些特殊的文本样式组件
export const Lead = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => (
        <p ref={ref} className={cn(typographyVariants({ variant: 'lead' }), className)} {...props} />
    )
);
Lead.displayName = 'Lead';

export const LargeText = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
    ({ className, ...props }, ref) => (
        <div ref={ref} className={cn(typographyVariants({ variant: 'large' }), className)} {...props} />
    )
);
LargeText.displayName = 'LargeText';

export const SmallText = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
    ({ className, ...props }, ref) => (
        <small ref={ref} className={cn(typographyVariants({ variant: 'small' }), className)} {...props} />
    )
);
SmallText.displayName = 'SmallText';

export const MutedText = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
    ({ className, ...props }, ref) => (
        <p ref={ref} className={cn(typographyVariants({ variant: 'muted' }), className)} {...props} />
    )
);
MutedText.displayName = 'MutedText';

// --- 布局组件 ---
// 对于布局组件，我们通常只关心 className 和 asChild，不预设复杂样式

export const Section = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'section';
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Section.displayName = 'Section';

export const Main = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'main';
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Main.displayName = 'Main';

export const Header = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'header';
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Header.displayName = 'Header';

export const Footer = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'footer';
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Footer.displayName = 'Footer';

export const Nav = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'nav';
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Nav.displayName = 'Nav';
export const Aside = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'aside'; // 默认渲染 <aside> 原生标签
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Aside.displayName = 'Aside';

export const Article = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement> & { asChild?: boolean }>(
    ({ className, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'article';
        return <Comp className={cn(className)} ref={ref} {...props} />;
    }
);
Article.displayName = 'Article';
